<template>
  <div>
    <!-- 标签区域 -->
    <div class="tags flex">
      <button class="btn" @click="popoverSwitch">
        <div v-if="!isShowPopover">{{ curTag }}<i class="el-icon-arrow-right" ></i></div>
        <div v-else>关闭<i class="el-icon-arrow-down"></i></div>
      </button>
      <!-- 弹出层 -->
      <div class="popover" v-show="isShowPopover">
        <div @click="showChosenPlayList('全部')" class="pointer mgt-10" :class="{ isActive: '全部' === curTag }">全部</div>
        <div class="cate-item flex mgt-20" v-for="(cate, index) in cates" :key="index">
          <div class="cate-name">
            <i class="iconfont" :class="icon[index]"></i>
            <span>{{ cate.type }}</span>
          </div>
          <div class="list-wrap">
            <ul class="flex">
              <li v-for="(tag,index2) in cate.data" :key="index2" @click="showChosenPlayList(tag.name)">
                  <span class="mgl-6" :class="{ isActive: tag.name === curTag }">{{ tag.name }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 右侧热门分类 -->
      <div class="hot-cate-wrap flex">
        <span v-for="tag in hotCate" :key="tag.id" class=" hot-item font-12 pointer mgr-15" :class="{ isActive: tag.name === curTag }" @click="showChosenPlayList(tag.name)">{{ tag.name }}</span>
      </div>
    </div>
    <!-- 歌单区域 -->
    <div class="playlist-area" v-loading.fullscreen.lock="loading" element-loading-spinner="el-icon-loading">
      <cover :imgList="playList" @clickToDo="toPlayListDetail">
        <template v-slot:img="scope">
          <img :src="scope.item.coverImgUrl + '?param=300y300'" alt="">
        </template>
      </cover>
    </div>
  </div>
</template>

<script>
// getHighTags, getHighPlayList,
import { getPlayListCate, getPlayListByCate, getHotCate } from '@/api/playList.js'
import Cover from '@/components/CoverImg/cover.vue'
export default {
  data () {
    return {
      curTag: '全部',
      // 热门分类
      hotCate: [],
      // 分类,{0: {type: '语种', data : []}, ...}这样的结构
      cates: [],
      // 歌单
      playList: [],
      // 是否显示弹出层
      isShowPopover: false,
      loading: true
    }
  },
  components: {
    Cover
  },
  created () {
    this.showHotCate()
    this.showTags()
    this.showChosenPlayList('全部')
  },
  methods: {
    // 获取热门分类
    async showHotCate () {
      const res = await getHotCate()
      if (res.data.code !== 200) return this.$message.error('获取分类失败')
      this.hotCate = res.data.tags
    },
    // 获取分类标签
    async showTags () {
      const res = await getPlayListCate()
      if (res.data.code !== 200) return this.$message.error('获取分类失败')
      // 把数据改造一下,放到cates中
      for (let i = 0; i < Object.keys(res.data.categories).length; i++) {
        // const obj = { type: '', data: [] }
        const obj = {}
        obj.type = res.data.categories[i] // 中括号读取对象值
        obj.data = res.data.sub.filter(item => item.category === i) // 将全部标签数组按category来分类
        this.cates.push(obj)
      }
    },
    // async showHighPlayList () {
    //   // 展示精品歌单
    // },
    // 选择标签后显示对应分类歌单
    async showChosenPlayList (tag) {
      this.loading = true
      const res = await getPlayListByCate({ cat: tag })
      // console.log(res)
      this.playList = res.data.playlists
      this.curTag = tag
      // 关闭弹出框,热门标签也不会影响到,反正都是设为false
      this.isShowPopover = false
      this.loading = false
    },
    // 弹出框开关
    popoverSwitch () {
      this.isShowPopover = !this.isShowPopover
    },
    // 跳转到歌单
    toPlayListDetail (id) {
      this.$router.push(`/playListDetail/${id}`)
    }
  },
  computed: {
    icon () {
      return {
        0: 'icon-diqiuquanqiu',
        1: 'icon-fengge',
        2: 'icon-xiazai47',
        3: 'icon-smiling',
        4: 'icon-zhuti'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.tags {
  width: 96%;
  justify-content: space-between;
  position: relative;
}
.popover {
  width: 600px;
  position: absolute;
  top: 35px;
  z-index: 9;
  background-color: #fff;
  box-shadow: 0 0 8px rgb(226, 226, 223);
}
.cate-item {
  width: 100%;
}
.cate-name {
  width: 20%;
}
.list-wrap {
  width: 80%;

  ul {
    flex-wrap: wrap;
    li {
      width: 20%;
      text-align: left;
      cursor: pointer;
      &:not(:nth-child(-n+5)) {
        // 除了前五个
        margin-top: 10px;
      }
      &:hover {
        color: #ec4141;
      }
    }
  }
}
.hot-item {
  line-height: 30px;
  height: 30px;
}
.isActive {
  background-color: #fdf5f5;
  color: #ec4141;
  box-shadow:  0 0 15px #ac7d7d;
}
</style>
